<template>

    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-tree :default-expand-all="true" :data="defaultProps0" :props="defaultProps" style="width: 200px"
                    @node-click="handleNodeClick" />
            </el-aside>
            <el-container>
                <el-main>
                    <el-tree ref="treeRef" :default-expand-all="true" :data="menuList" show-checkbox node-key="value"
                        :default-checked-keys="backFillMenuId" :props="defaultProps1" style="width: 200px;float: right;"
                        @check-change="selectMenu" />
                </el-main>
                <el-footer>
                    <el-button type="primary" @click="addUserRole">保存</el-button>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const router = useRouter();
const form = reactive({
    roleId: 0,
    menuId: []
})

//分页
const page=reactive({
    roleName:'',
    pageIndex:1,
    pageSize:10000,
    totalCount:0,
    totalPage:0
})



const treeRef = ref()
//左侧树形点击事件
const handleNodeClick = (data: any) => {
    // backFillMenuId.value.splice(0,backFillMenuId.value.length)
    // backFillMenuId.value.length=0;
    // backFillMenuId.value=[];
    // console.log(data)
    form.roleId = data.roleId
    // console.log(form.roleId);
    backFillMenu(data.roleId);
}

//右侧树形点击事件(多选)
let menu = ref([])
const selectMenu = (data: any, checked: any) => {
    if (checked) {
        menu.value.push(data.value)
    }
    else {
        menu.value = menu.value.filter(x => x != data.value)
    }
    // console.log(data)
    form.menuId = menu.value
    // console.log(form.menuId)
}


const defaultProps = {
    children: 'children',
    label: 'roleName',
}
const defaultProps1 = {
    value: 'value',
    label: 'label',
}
//获取角色
const roleList = ref([])
const getRoleList = () => {
    axios.get("/api/Role/GetRole", {
        params: {
            RoleName: page.roleName,
            PageIndex: page.pageIndex,
            PageSize: page.pageSize
        }
    })
        .then(res => {
            roleList.value = res.data.data.list
            page.totalCount = res.data.data.totalCount
            page.totalPage = res.data.data.totalPage
            // console.log(roleList.value)
        })
        .catch(err => {
            console.log(err);
        })
}
const defaultProps0=[
    {
        roleName:'角色',
        children:roleList
    }
]
//获取菜单
const menuList = ref([])
const getMenuList = () => {
    axios.get("/api/Menu/GetParentName")
        .then(res => {
            menuList.value = res.data.data
            // console.log(menuList.value)
        })
        .catch(err => {
            console.log(err);
        })
}


//添加
const addUserRole = () => {
    axios.post("/api/RoleMenu/Create", form)
        .then(res => {
            if (res.data.code == 0) {
                ElMessage.success("添加成功");
            }
        })
        .catch(err => {
            console.log(err);
        })
}

const resetChecked = () => {
  treeRef.value!.setCheckedKeys([], false)
}

//返填菜单
let backFillMenuId = ref([]);
const backFillMenu = (roleId: any) => {
    // backFillMenuId.value.splice(0,backFillMenuId.value.length)
    // backFillMenuId.value.length=0;
    // backFillMenuId.value=[];
    // console.log(backFillMenuId.value)
    axios.get("/api/Menu/GetMenu?roleId=" + roleId)
        .then(res => {
            resetChecked();
            backFillMenuId.value = res.data.data.map(x => x.menuId)
            // console.log(backFillMenuId.value);
        })
        .catch(err => {
            console.log(err);
        })
}

onMounted(() => {
    getRoleList();
    getMenuList();
})
</script>